import React, { useRef, useEffect, useMemo } from 'react';
import { connect } from 'dva';
import { Link, Route, Switch } from 'dva/router';
import { Radio, Card, Button, Tag } from 'antd';
import {
    ArrowUpOutlined,
    ArrowDownOutlined,
    DownloadOutlined,
} from '@ant-design/icons';
import ReactEcharts from 'echarts-for-react';
import html2canvas from 'html2canvas';
import style from '@/pages/IndexPage.css';

let data = [];
for ( let i = 0 ; i < 30 ; i++){
    data.push({ date:i+1, value:200 + Math.round(Math.random() * 50), sameRatio:200 + Math.round(Math.random() * 50), adjoinRatio:200 + Math.round(Math.random() * 50) });
}
function HistoryLineChart({ title, statusMaps, theme }) {
    let textColor = 'rgba(0, 0, 0, 0.85)';
    let seriesData = [], categoryData = [], valueData=[], sameRatioData = [], adjoinRatioData = [];
    data.forEach(i=>{
        categoryData.push(i.date);
        valueData.push(i.value);
        sameRatioData.push(i.sameRatio);
        adjoinRatioData.push(i.adjoinRatio);
    })
   
    seriesData.push({
        type:'line',
        name:'sameRatio',
        showSymbol:false,
        itemStyle:{ color:'#023bfe'},
        areaStyle:{
            color:{
                type:'linear',
                x:0,
                y:0,
                x2:0,
                y2:1,
                colorStops:[
                    { offset:0, color:'rgba(2, 59, 254, 0.15)' },
                    { offset:1, color:'transparent' }
                ]
            }
        },
        data:valueData,
        z:10
    });
    seriesData.push({
        type:'line',
        name:'sameRatio',
        smooth:true,
        showSymbol:false,
        itemStyle:{ color:'#951aef'},
        areaStyle:{
            color:{
                type:'linear',
                x:0,
                y:0,
                x2:0,
                y2:1,
                colorStops:[
                    { offset:0, color:'rgba(149, 25, 239, 0.15)' },
                    { offset:1, color:'transparent' }
                ]
            }
        },
        data:sameRatioData
    });
        

   
    return (
        
            <ReactEcharts
                notMerge={true}
                style={{ height: '100%' }}
                option={{
                    title: {
                        text: title,
                        textStyle: {
                            fontSize: 14,
                        },
                        left: 20,
                        top: 10,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer:{
                            type:'line',
                            label:{
                                backgroundColor:'#fff'
                            }
                        }
                    },
                    
                    grid:{
                        top:80,
                        left:20,
                        right:20,
                        bottom:20,
                        containLabel: true,
                    },
                    xAxis: {
                        type:'category',
                        axisTick:{ show:false },
                        axisLine:{ show:false },
                        data:categoryData 
                    },
                    yAxis: {
                        type: 'value',
                        name: 'kwh',
                        splitArea: {
                            show: false,
                        },
                        axisLine: { show: false },
                        axisTick: { show: false },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#f0f0f0',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(0, 0, 0, 0.65)',
                        }
                    },
                    
                    series:seriesData
                }}
            />
    );
}

export default React.memo(HistoryLineChart);
